<template>
  <div class="editor" ref="editorRef"></div>
</template>

<script setup lang="ts">
import { ref,onMounted,onBeforeUnmount, watch} from "vue";
import E from "wangeditor";
const editorRef = ref();
const props = defineProps({
  modelValue:{
    type:String,
    required:true
  },
  placeHolder:{
    type:String,
    default:"请输入内容"
  }
})
const emits = defineEmits(['update:modelValue'])
let instance:any;
watch(() => props.modelValue,(newValue:string) => {
  instance.txt.html(newValue)
})
onMounted(() => {
  instance = new E(editorRef.value);
  instance.config.placeholder = props.placeHolder
  Object.assign(instance.config, {
    onchange() {
      emits('update:modelValue',instance.txt.html())
    },
  });
  instance.create();
});

onBeforeUnmount(() => {
  instance.destroy();
  instance = null;
});
</script>

<style scoped>
.ki-editor{
  margin-top:40px;
}
</style>